// 取元素 1.表格 2.表单 3.模态框关闭按钮
const tbody = document.querySelector('tbody')
const form = document.querySelector('.add-form')
const clearBtn = document.querySelector('button.btn-close')

// 获取 模态框 省市县 下拉列表 元素或者元素的值
const getEle = (n, t, dq = document.querySelector(`[name=${n}]`)) => (t === 'v' ? dq.value : dq)
// 渲染函数 渲染 省市县 下拉列表
const renderSelect = (e, list) =>
  (e.innerHTML += list.map(i => `<option value=${i}>${i}</option>`).join(''))
// 获取学员信息
const getStudent = async () => render((await axiosFn('/student/list')).data.data)

// 获取省市县数据 拼接url 发送请求 province省 city城市 county地区
async function getData(type, url = 'geo/province', p = `pname=${getEle('province', 'v')}`) {
  if (type === 'city') url = `geo/city?${p}`
  if (type === 'county') url = `geo/county?${p}&cname=${getEle('city', 'v')}`
  return (await axios(url)).data
}

// 省市城市改变函数 省一 province 市二 city 县三 county
// 传入一二级元素 一级绑定change事件 二级清空数据发送请求重新渲染 如果是一级还要清空三级元素
function EleChange(first, next, msg, last = 'county') {
  getEle(first).addEventListener('change', async () => {
    getEle(next).innerHTML = `<option value="">--${msg}--</option>`
    renderSelect(getEle(next), await getData(next))
    if (msg === '市') getEle(last).innerHTML = '<option value="">--县--</option>'
  })
}

// 渲染函数 渲染学员信息
function render(list) {
  console.log(list)
  tbody.innerHTML = list
    .map(
      item => `
<tr>
    <th scope="row">${item.id}</th>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.sex}</td>
    <td>${item.group}</td>
    <td>${item.phone}</td>
    <td>${item.salary}</td>
    <td>${item.truesalary}</td>
    <td>${item.province + item.city + item.county}</td>
    <td>
      <button type="button" class="btn btn-primary btn-sm editBtn" data-id=${item.id}>修改</button>
      <button type="button" class="btn btn-danger btn-sm delBtn" data-id=${item.id}>删除</button>
    </td>
</tr> `
    )
    .join('')
}

// 表格操作 删除 编辑
tbody.addEventListener('click', async e => {
  const { id } = e.target.dataset
  if (e.target.classList.contains('delBtn')) {
    console.log(id)
    await axios({ url: '/student/delete', method: 'delete', params: { id } })
    getStudent()
  }
  if (e.target.classList.contains('editBtn')) {
    // console.log(1111)
    // 按下编辑按钮 1.打开模态框 设置标题 传递id 设置确认按钮文字
    $('#addModal').modal('show')
    const title = document.querySelector('#addModalLabel')
    title.innerHTML = '修改学员'
    title.dataset.id = id
    form.querySelector('button[type=submit]').innerHTML = '确认修改'
    // 2.查询id对应学员信息
    const studentObj = (await axios({ url: `/student/one/?id=${id}` })).data.data
    console.log(studentObj)
    // 3.回显信息
    // 3.1 回显表单省市县 拿省份数据并渲染 拿城市数据并渲染 拿地区数据并渲染 省份城市绑定change事件-------todo尝试封装一下
    getEle('province').value = studentObj.province
    renderSelect(getEle('city'), await getData('city'))
    getEle('city').value = studentObj.city
    renderSelect(getEle('county'), await getData('county'))
    getEle('county').value = studentObj.county
    // 3.2 回显表单普通字段 跳过性别另作处理
    for (const key in studentObj) {
      const element = document.querySelector(`[name=${key}]`)
      if (element && key !== 'sex') element.value = studentObj[key]
    }
    // 单独处理性别
    document.querySelector(`[name=sex][value=${studentObj.sex}]`).checked = true
  }
})

// 添加表单---提交事件
form.addEventListener('submit', async e => {
  e.preventDefault()
  // 获取表单所有字段 字段缺少 就是空缺------------------非空判断改进 改用对象遍历todo
  const arr = []
  serialize(form)
    .split('&')
    .forEach(item => arr.push(item.split('=')[0]))
  console.log(arr)
  // 第一步判断 表单非空判断 判断函数返回值 如果是fasle代表字段缺失表单有空值 直接return不往下执行
  if (!toastarrfn(arr[0], 'name', '姓名')) return
  if (!toastarrfn(arr[1], 'age', '年龄')) return
  if (!toastarrfn(arr[2], 'group', '组号')) return
  if (!toastarrfn(arr[4], 'phone', '手机号')) return
  if (!toastarrfn(arr[5], 'salary', '期望薪资')) return
  if (!toastarrfn(arr[6], 'truesalary', '实际薪资')) return
  if (!toastarrfn(arr[7], 'province', '省份')) return
  if (!toastarrfn(arr[8], 'city', '城市')) return
  if (!toastarrfn(arr[9], 'county', '县')) return
  // 函数执行到这里 代表通过非空判断
  // 获取所有表单的值
  const data = serialize(form, { hash: true })
  // 判断 添加 还是 编辑 条件是标题的文字
  const title = document.querySelector('#addModalLabel')
  title.innerHTML === '录入新学员'
    ? await axiosFn('/student/add', 'post', data)
    : axiosFn('/student/update', 'put', { ...data, id: title.dataset.id })
  // 完成后清除数据 关闭模态框 刷新数据
  $('#addModal').modal('hide')
  form.reset()
  getStudent()
})

// 关闭按钮 清空数据
clearBtn.addEventListener('click', () => form.reset())
// 默认点击任意非模态框的范围会关闭模态框等于取消操作 关闭模态框后触发下面函数 清空表单数据
$('#addModal').on('hidden.bs.modal', form.reset())
$('#addModal').on('show.bs.modal', () => {
  document.querySelector('#addModalLabel').innerHTML = '添加学员'
  form.querySelector('button[type=submit]').innerHTML = '确认添加'
})

// 表单非空判断函数
function toastarrfn(a, b, msg) {
  if (a !== b) {
    alert(`请输入${msg}`)
    return false
  } else return true
}

// 初始化函数
async function init() {
  // 获取学生列表
  getStudent()
  // 渲染省份
  renderSelect(getEle('province'), await getData())
  // 绑定change事件
  EleChange('province', 'city', '市')
  EleChange('city', 'county', '县')
}
init()
